<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/index.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all" />
</head>
<body>
	<fieldset class="layui-elem-field">
  	<legend>条件选择</legend>
 	 <div class="layui-field-box">
   		<form action="" class="layui-form layui-form-pane">
   			<div class="layui-form-item" align="center">
   			<div class="layui-inline">
   				<label class="layui-form-label">供应商</label>
    			<div class="layui-input-inline">
      				<select name ="providerid" id="providerid">
							<option value="">请选择供应商</option>
					</select>
    			</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">商品名称</label>
					<div class="layui-input-block">
						<input type="text" class ="layui-input" name = "goodsname" placeholder="请输入商品名称">
					</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">生产批号</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "productcode" placeholder="请输入商品生产批号">
				</div>
   			</div>
   			</div>
   			
   			
   			<div class="layui-form-item" align="center">
   			<div class="layui-inline">
   				<label class="layui-form-label">批准文号</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "promitcode" placeholder="请输入商品批准文号">
				</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">商品描述</label>
					<div class="layui-input-block">
							<input type="text" class ="layui-input" name = "description" placeholder="请输入商品描述">
					</div>
   			</div>
   			
   			<div class="layui-inline">
   				<label class="layui-form-label">规格</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "size" placeholder="请输入商品规格">
				</div>
   			</div>
   			</div>
   			
   			<div class="layui-form-item" align="center">
   			<div class="layui-inline">
    			<div class="layui-input-inline">
      				 <button class="layui-btn" lay-submit="" lay-filter="search"  id="search"><span class="layui-icon layui-icon-search"></span>搜索</button>
      				 <button type="reset" class="layui-btn layui-btn-primary"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
    			</div>
   			</div>	
   			
   			</div>
   			
   		</form>
 	 </div>
</fieldset>
	<table id="goods" lay-filter="goods"></table>

<div>
	<div id="toolbar" style="display: none;">
		<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add"><span class="layui-icon layui-icon-add-1" shiro:hasProvider="provider:create"></span>添加商品</button>
	</div>
	<div id="rowBtn" style="display: none;">
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="update"><span class="layui-icon layui-icon-edit" shiro:hasProvider="provider:update"></span>更新</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><span class="layui-icon layui-icon-delete" shiro:hasProvider="provider:delete"></span>删除</button>
	</div>
</div>

<div style="display: none; padding: 20px" id="goodsadd" >
	<form action="" class = "layui-form-pane layui-form"  method="post" id="form"  lay-filter="form">
		<div class="layui-col-md12 layui-col-xs12">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md9 layui-col-xs7">
				<div class="layui-form-item magt3">
					<label class="layui-form-label">供应商</label>
					<div class="layui-input-block">
						<select name = "providerid" id = "addproviderid">
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品名称</label>
					<div class="layui-input-block">
						<input type= "hidden" name = "id">
						<input type="text" class ="layui-input" name = "goodsname" placeholder="请输入商品名称">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品描述</label>
					<div class="layui-input-block">
							<input type="text" class ="layui-input" name = "description" placeholder="请输入商品描述">
					</div>
				</div>
			</div>
			<div class="layui-col-md3 layui-col-xs5" >
				<div class="layui-upload-list thumbBox mag0 magt3">
					<input type="hidden" name = "goodsimg" id = "goodsimg" value = "images/defaultgoodsimg.png">
					<img style="width: 160px;height: 160px" class="layui-upload-img thumbImg" src="/update/down?path=images/defaultgoodsimg.png" >
				</div>
			</div>
		</div>
		
		<div class = "layui-form-item">
			<div class = "layui-inline">
			<label class="layui-form-label">产地</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "produceplace" placeholder="请输入商品产地">
				</div>
			</div>
			
			<div class = "layui-inline">
			<label class="layui-form-label">包装</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "goodspackage" placeholder="请输入商品包装">
				</div>
			</div>
			
			<div class = "layui-inline">
			<label class="layui-form-label">规格</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "size" placeholder="请输入商品规格">
				</div>
			</div>
			
			<div class = "layui-inline">
				<label class="layui-form-label">生产批号</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "productcode" placeholder="请输入商品生产批号">
				</div>
			</div>
			
			<div class = "layui-inline">
				<label class="layui-form-label">批准文号</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "promitcode" placeholder="请输入商品批准文号">
				</div>
			</div>
			
			<div class = "layui-inline">
			<label class="layui-form-label">销售价格</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "price" placeholder="请输入商品销售价格">
				</div>
			</div>
			
			<div class = "layui-inline">
			<label class="layui-form-label">库存量</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "number" placeholder="请输入商品库存量">
				</div>
			</div>
			
			<div class = "layui-inline">
			<label class="layui-form-label">库存预警值</label>
				<div class="layui-input-inline">
					<input type="text" class ="layui-input" name = "dangernum" placeholder="请输入商品库存预警值">
				</div>
			</div>
			
			<div class = "layui-inline">
			<label class="layui-form-label">是否有效</label>
				<div class="layui-input-inline">
					<input type ="radio" name="available" value="1" checked="" title="有效">
					<input type ="radio" name="available" value="0"  title="有效">
				</div>
			</div>
		</div>
		
		<div class="layui-form-item" >
    		<div class="layui-input-block" style="text-align: center;">
      			<button type="submit" class="layui-btn" lay-submit="" lay-filter="dosubmit"><span class="layui-icon layui-icon-ok">提交</button>
     			<button type="reset" class="layui-btn layui-btn-primary"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
    		</div>
  		</div> 
	</div>
	</form>
</div>

<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
	var t;
	var selectTree;
	layui.use(["jquery","layer","form","table","upload"],function(){
		var $ = layui.jquery;
		var layer = layui.layer;	
		var form = layui.form;	
		var table = layui.table;
		var upload = layui.upload;
		//table 初始化开始
		t = table.render({
			elem:"#goods",
			page:true,
			url:"/buss/goods/list",
			height: 'full-220',
			toolbar:"#toolbar",
			parseData:function(rs){
				if(rs.code != 200){
					layer.msg(rs.msg);
					return false;
				}
				 return {
				      "code": rs.code, //解析接口状态
				      "msg": rs.msg, //解析提示文本
				      "count": rs.data.count, //解析数据长度
				      "data": rs.data.data //解析数据列表
				    };
			},
			response:{
				statusCode: 200 
			},
			done: function(res, curr, count){
			    //如果是异步请求数据方式，res即为你接口返回的信息。
			    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
			    console.log(res);
			    //得到当前页码
			    console.log(curr); 
			    //得到数据总量
			    console.log(count);
			    if(res.data.length == 0 && curr != 1){
			    	t.reload({
			    		page:{
			    			curr:curr - 1
			    		}
			    	});
			    }
			  },
			cols:[ [
				 {field: 'id', title: 'ID', sort: true,align:"center",width:"100"},
				 {field: 'goodsname', title: '商品名称', sort: true,align:"center",width:"100"},
			     {field: 'produceplace', title: '产地',align:"center",width:"100"},
			     {field: 'size', title: '规格',align:"center",width:"100"},
			     {field: 'goodspackage', title: '包装', sort: true,align:"center",width:"100"},
				 {field: 'productcode', title: '生产编号', sort: true,align:"center",width:"100"},
			     {field: 'promitcode', title: '批准文号',align:"center",width:"100"},
			     {field: 'description', title: '商品描述',align:"center",width:"150"},
			     {field: 'price', title: '商品价格', sort: true,align:"center",width:"100"},
			     {field: 'number', title: '商品数量',align:"center",width:"100"},
			     {field: 'dangernum', title: '预警数量',align:"center",width:"100"},
			     {field: 'goodsimg', title: '商品图片',align:"center",width:"80",templet:function(d){
			    	 return "<img style='whith:30px;height:30px;' src='/update/down?path="+d.goodsimg+"'/>"
			     }},
			     {field: 'available', title: '是否有效',align:"center",width:"100",templet:function(d){
			    	 return d.available==1?"<font color=blue>有效</font>":"<font color=red>无效</font>"
			     }},
			     { title: '操作',toolbar:"#rowBtn",align:"center",width:"200",fixed:"right"}
			] ]
		});
		
		//上传文件 加载  开始
		upload.render({
       		elem: '.thumbBox',
        	url: '/update/up',
        	method : "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
        	acceptMime:'image/*',
	        field:'mf',
        	done: function(res, index, upload){
        	var imgpath = res.path;
            $('.thumbImg').attr('src',"/update/down?path="+imgpath);
            $('.thumbBox').css("background","#fff");
            $("#goodsimg").val(imgpath);
       		 }
    	});
		//上传文件 加载  开始
		
		//table 初始化结束
		form.on("submit(search)",function(d){
			t.reload({
				where:d.field,
				page:{
					curr:1
				}
			});	
			return false;
		});
		//头监听事件开始
		table.on('toolbar(goods)', function(obj){
			  var checkStatus = table.checkStatus(obj.config.id);
			  switch(obj.event){
			    case 'add':
			      add()
			    break;
			  };
		});
		//头监听事件结束
		
		//新增开始
		var layerIndex;
		var url;
		 function add(){
			layerIndex=layer.open({
				 	   type: 1, 
				 	   content: $('#goodsadd'),
				       title:"新增菜单",
				       area:['800px','550px'],
				       success: function(){
				    	   $("#form")[0].reset();
				    	   $("#id").val("");
				    	   $.post("/buss/goods/getProvider",function(rs){
				   			var provider = rs.data;
				   		 	$("#addproviderid").html("<option value=''>请选择供应商</option>");	
				   			$.each(provider,function(index,value){
				   				$("#addproviderid").append("<option value="+value.id+">"+ value.providername +"</option>");
				   			});
				   			form.render("select");
				   		})	
				   			$("#goodsimg").val("images/defaultgoodsimg.png");
					    	$('.thumbImg').attr('src',"/update/down?path=images/defaultgoodsimg.png");  
				    		url="/buss/goods/addBusGoods";
					   }
			      });
		     };
		//新增结束
		
		
		
		//监听弹出层form表单提交 开始
		form.on("submit(dosubmit)",function(d){
			//对form表单进行序列化
			var data = $("#form").serialize();
			$.post(url,data,function(rs){
				if(rs.code == 200){
					t.reload();
				}
				layer.msg(rs.msg);
				layer.close(layerIndex);
			});
			return false;
		});
		//监听弹出层form表单提交 结束
		
		
		//行监听事件开始
		table.on('tool(goods)', function(obj){ 
			var data = obj.data;
			switch(obj.event){
				case 'update':
					update(data);
				break;
				case 'delete':
					deleteOne(data);
				break;
			}
		});
		//行监听事件结束
		
		//跟新数据 开始
		function update(data){
			layerIndex = layer.open({
				   type: 1, 
			 	   content: $('#goodsadd'),
			 	   title:"修改菜单",
			       area:['800px','500px'],
			       success: function(){
			    	  $("#form")[0].reset();
			    	 	form.val("form",data);
			    	 	url="/buss/goods/updateBusGoods";
			    	 	 $.post("/buss/goods/getProvider",function(rs){
					   			var provider = rs.data;
					   		 	$("#addproviderid").html("<option value=''>请选择供应商</option>");	
					   			$.each(provider,function(index,value){
					   				$("#addproviderid").append("<option value="+value.id+">"+ value.providername +"</option>");
					   			});
					   			$("#addproviderid").val(data.providerid);
					   			form.render("select");
					   		})	
						    $('.thumbImg').attr('src',"/update/down?path="+data.goodsimg);   	
				 			 }
						});
					}
		
		//跟新数据 结束
		
		//删除单个数据 开始
		function deleteOne(data){
			var id = data.id;
			var goodsimg = data.goodsimg;
				layer.confirm('是否删除该供应商?', {icon: 3, title:'提示'}, function(index){
					$.post("/buss/goods/deleteOne",{"id":id,"goodsimg":goodsimg},function(rs){
						if(rs.code == 200){
							t.reload();
						}	
						layer.msg(rs.msg);
					});
					layer.close(index);
				});
			};
		//删除单个数据 结束
		
		//初始化下拉框
		$.post("/buss/goods/getProvider",function(rs){
			var provider = rs.data;
			console.log(provider);
			$.each(provider,function(index,value){
				$("#providerid").append("<option value="+value.id+">"+ value.providername +"</option>");
			});
			form.render("select");
		})
	});
</script>
</body>
</html>